<template>
  <div class="status-card">
    <div class="status-success" v-if="status === 1">
      <div class="icon"><span class="material-symbols-outlined"> barcode_scanner </span></div>
      <div class="title">报告验伪</div>
      <div class="desc">请在下方输入框内输入报告编号以验证真伪</div>
      <div class="code">JC - 20231025 - 5868</div>
    </div>
    <div class="status status-yes" v-else-if="status === 2">
      <div class="icon"><span class="material-symbols-outlined"> task_alt </span></div>
      <div class="title">您的报告是真实有效的</div>
      <div class="desc">报告编号：JC-20231025-5868</div>
      <div class="desc">报告日期：2023年10月25日</div>
    </div>
    <div class="status status-no" v-else>
      <div class="icon"><span class="material-symbols-outlined"> warning </span></div>
      <div class="title">您的报告编号有误，如有问题请与我们联系</div>
      <div class="desc">联系电话：010-83595020</div>
      <div class="desc">服务邮箱：service@cnpc.com.cn</div>
    </div>
  </div>
</template>

<script setup>
import {defineProps, toRefs} from 'vue'

const props = defineProps(['status'])
const {status} = toRefs(props)

// const list = ref([
//   {
//     id: 1,
//     date: '2023年11月05日 10:22:35 ',
//     name: '锆石U-Pb定年分析.pdf',
//     status: 0
//   },
//   {
//     id: 2,
//     date: '2023年11月05日 10:22:35 ',
//     name: '锶同位素分析（岩石）.pdf',
//     status: 1
//   }
// ])
</script>

<style scoped lang="scss">
.status-card{
  margin: 0 dpi(4rem);
  .status-success{
    display: flex;
    align-items: center;
    flex-direction: column;
    height: dpi(54rem);
    margin: dpi(5rem) 0;
    background-color: #f5f5f5;
    .icon{
      width: dpi(8rem);
      height: dpi(8rem);
      margin-top: dpi(6rem);
      font-family: MaterialSymbolsOutlined-Light;
      color: #0571b0;
      .material-symbols-outlined{
        font-size: dpi(9rem);
        color: #0571b0;
      }
    }
    .title{
      margin: dpi(4rem) 0;
      font-family: PingFangSC-Semibold;
      font-size: dpi(4rem);
      color: #05204d;
    }
    .desc{
      font-family: PingFangSC-Medium;
      font-size: dpi(2rem);
      color: #565656;
    }
    .code {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 dpi(7rem);
      height: dpi(11rem);
      margin: 0 dpi(6rem);
      margin-top: dpi(5rem);
      text-wrap: nowrap;
      background-color: #ffffff;
      box-shadow: 0rem dpi(1rem) dpi(1rem) 0rem rgba(0, 0, 0, 0.05);
      font-family: HelveticaNeue-Bold;
      font-size: dpi(5rem);
      color: #05204d;
    }
  }

  .status{
    display: flex;
    align-items: center;
    flex-direction: column;
    min-height: dpi(36rem);
    margin: dpi(5rem) 0;
    &-no{
      // color: #ff0000;
      background-color: rgba(255, 0, 0, 0.05);
      .title{
        color: #ff0000;
      }
      .icon{
        .material-symbols-outlined{
          font-size: dpi(6rem);
          color: #ff0000;
        }
      }
    }
    &-yes{
      color: #0571b0;
      background-color: rgba(5, 113, 176, 0.05);
      .title{
        color: #0571b0;
      }
      .icon{
        .material-symbols-outlined{
          font-size: dpi(6rem);
          color: #0571b0;
        }
      }
    }
    .icon{
      // width: dpi(5rem);
      // height: dpi(5rem);
      margin-top: dpi(6rem);
      // font-family: MaterialSymbolsRounded-Regular;
      // font-size: dpi(6rem);
      // background: #000;
    }
    .title{
      margin: dpi(4rem) 0;
      font-family: PingFangSC-Medium;
      font-size: dpi(3rem);
    }
    > .desc{
      font-family: PingFangSC-Regular;
      font-size: dpi(2rem);
      color: rgba(5, 32, 77, .5);
      opacity: 0.5;
      &:not(&:last-child) {
        margin-bottom: dpi(1rem);
      }
    }
  }
}
</style>